<template>
	<div class="mt_itemt">
		<van-nav-bar :fixed="true" :border="false" title="明细" left-arrow @click-left="onClickLeft" />
		
		<div class="my_top">
			<div class="my_left">
				<p>团队收益（积分）</p>
			</div>
			
			<div class="my_right">
				<p>{{TeamInfo.tdsy}}</p>
				<div></div>
			</div>
		</div>
		
		<div class="my_bottom">
			
			<div style="position: relative;">
				
			<!-- 直推会员 -->
			<transition name="fold-right-myteam">
			
				<div class="mb_list">
					
					<div class="ml_item" v-for="item,index in TeamInfo.list" :key="index">
						
						<div class="mli_left">
							<div class="ml_info">
								<p>{{item.frommobile}}</p>
								<div>会员等级 <img class="mt_vip" :src="myApp.srcPath( item.fromlevel + '.png','images/vip_ico')" alt="" /></div>
							</div>
						</div>
						
						<div class="mli_right">
							<p>+{{item.s_nums}}</p>
							<p>{{item.s_time}}</p>
						</div>
						
					</div>
					
				</div>
			
			</transition>
			
			</div>
		</div>
		
	</div>
		
</template>

<script>
	import Vue from 'vue';
	import {
		NavBar,
		Toast,
	} from 'vant';

	Vue.use(NavBar);
	
	import {MyTeam,TeamList} from '../serve/api.js'

	export default {
		created() {
			
			this.TeamList()
			
		},
		data(){
			return{
				
				TeamInfo:""
			}
		},
		
		methods: {
			
			goUrl(url){
				
				this.$router.push(url)
				
			},
			
			//团队明细列表
			TeamList(){
				
				let params;
				
				TeamList( params ,(res) => {
					
					// console.log(res)
					
					if(res.data.code == 1){
						
						this.TeamInfo = res.data.data
						
						
					}
					
				},(error) => {
					
				})
			
			},
			
			onClickLeft() {
				// Toast('返回');
				this.$router.go(-1)

			},
			onClickRight() {
				Toast('按钮');
			},
		},
	};
</script>

<style scoped="">
	
	.fold-left-myteam-enter-active {
		animation-name: fold-left-myteam-in;
		animation-duration: .4s;
	}

	.fold-left-myteam-leave-active {
		animation-name: fold-left-myteam-out;
		animation-duration: .4s;
	}

	@keyframes fold-left-myteam-in {
		0% {
			-webkit-transform: translate3d(100%, 0, 0);
			transform: translate3d(100%, 0, 0);
			/* visibility: visible; */
		}

		/*50% {
	      transform: translate3d(50%, 0, 0);
	    }*/
		100% {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
	}

	@keyframes fold-left-myteam-out {
		0% {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		/*50% {
	      transform: translate3d(-50%, 0 , 0);
	    }*/
		100% {
			-webkit-transform: translate3d(100%, 0, 0);
			transform: translate3d(100%, 0, 0);
			/* visibility: hidden; */
		}
	}

	.fold-right-myteam-enter-active {
		animation-name: fold-right-myteam-in;
		animation-duration: .4s;
	}

	.fold-right-myteam-leave-active {
		animation-name: fold-right-myteam-out;
		animation-duration: .4s;
	}

	@keyframes fold-right-myteam-in {
		0% {
			/* width: 100%; */
			-webkit-transform: translate3d(-100%, 0, 0);
			transform: translate3d(-100%, 0, 0);
			/* visibility: visible; */
		}

		/*50% {
	      transform: translate3d(50%, 0, 0);
	    }*/
		100% {
			/* width: 100%; */
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
	}

	@keyframes fold-right-myteam-out {
		0% {
			/* width: 100%; */
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		/*50% {
	      transform: translate3d(-50%, 0 , 0);
	    }*/
		100% {
			/* width: 100%; */
			-webkit-transform: translate3d(-100%, 0, 0);
			transform: translate3d(-100%, 0, 0);
			/* visibility: hidden; */
		}
	}
	
	.my_bottom{
		background-color: white;
	}
	
	.mli_right p:first-child{
		margin-bottom: .1rem;
	}
	
	.mli_right{
		text-align: right;
		font-size: .24rem;
		color: #666;
	}
	
	.ml_info p{
		margin-bottom: .1rem;
		color:#333333 ;
		font-size: .28rem;
	}
	
	.ml_info{
		color: #666666;
		font-size: .24rem;
	}
	
	.mt_vip{
		width: .3rem;
		height: .28rem;
	}
	
	
	.ml_head{
		width: .8rem;
		height: .8rem;
		margin-right: .25rem;
		border-radius: 50%;
	}
	
	.mli_left{
		align-items: center;
		display: flex;
	}
	
	.mb_list{
		/* top: 0; */
		left: 0;
		width: 100%;
		max-height: 10rem;
		overflow-y: scroll;
		position: absolute;
		background-color: white;
	}
	
	.mb_list .ml_item:last-child{
		border: none;
	}
	
	.ml_item{
		width: 100%;
		height: 1.2rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rem .36rem;
		box-sizing: border-box;
		border-bottom: 1px solid #FBFBFB;
	}
	
	.my_typeSolid{
		width: 1.56rem;
		height: 1px;
		background: #1D58FF;
		padding: 0 !important;
		position: absolute;
		bottom:0;
		transition: all .5s;
	}
	
	.mb_top div{
		padding: .23rem 0;
		transition: all .4s;
	}
	
	.mb_top .active{
		color: #1D58FF;
		/* border-bottom: 1px solid #1D58FF; */
		height: 100%;
	}
	
	.mb_top{
		transition: all .5s;
		position: relative;
		border: 1px solid #FBFBFB;
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: .26rem;
	}
	
	.myr_mx{
		width:1.11rem;
		height:.44rem;
		background:rgba(212,223,255,1);
		border-radius:.22rem;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #0034C9;
		font-size: .28rem;
	}
	
	.my_left{
		margin-bottom: .34rem;
	}
	
	.my_right{
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: .42rem;
		font-weight: bold;
	}
	
	.my_top{
		margin-top: 44px;
		color: white;
		font-size: .32rem;
		width: 100%;
		height: 2.18rem;
		background: #1D58FF;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: .82rem;
		padding-right: .51rem;
		box-sizing: border-box;
	}

	.mt_itemt {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
		border: #0034C9;
		background-color: #FBFBFB;
	}
</style>
